This PR implements a complete Supabase-based authentication system with protected routes, user dashboard, admin functionality, and investment management APIs for the Next.js application.

Overview

The implementation adds enterprise-grade authentication and investment management features while maintaining strict TypeScript compliance and minimal disruption to existing code.

Key Features Added

Authentication & Route Protection

• Magic Link Authentication: New sign-in page at /auth/sign-in with email-based magic link authentication
• Middleware Protection: Automatic route protection for /dashboard and /admin paths with role-based access control
• Role-based Authorization: Admin-only access to withdrawal approval functionality

User Dashboard (/dashboard)

A comprehensive investment dashboard featuring:

• Account Balance Display: Real-time balance calculations from approved transactions
• Investment Plans: Interactive forms for investing in active plans with ROI information
• Transaction History: Paginated table showing recent deposits, payouts, and withdrawals
• Withdrawal Requests: Form for users to request withdrawals with bank/wallet details

Admin Interface (/admin)

Administrative panel for managing withdrawal requests:

• Pending Approvals: List of all pending withdrawal requests
• One-click Actions: Approve or reject withdrawals with automatic transaction recording
• Role Verification: Ensures only users with admin role can access

API Endpoints

Complete backend API implementation:

• GET /api/me/role - Returns current user's role for middleware authorization
• POST /api/invest/[planId] - Processes investment requests with validation
• POST /api/withdraw - Creates withdrawal requests
• POST /api/admin/withdrawals/[id] - Handles admin approval/rejection

Technical Implementation

Supabase Integration

• Dual Client Setup: Separate browser and server clients with proper cookie handling
• Environment Variables: Uses NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY
• Async Server Components: Properly handles Next.js 15 async cookie API

Database Schema Compatibility

The implementation expects these Supabase tables:

• profiles - User profiles with role column
• investment_plans - Available investment plans
• transactions - Financial transaction records
• user_investments - User investment tracking
• withdrawal_requests - Withdrawal request management

Code Quality

• Strict TypeScript: All components use proper type definitions, zero any types
• Error Handling: Comprehensive error handling for database operations and API calls
• Form Validation: Client and server-side validation for all user inputs

Files Modified

Core Infrastructure

• src/lib/supabase.ts - New Supabase client configuration with browser/server separation
• src/middleware.ts - Route protection middleware with role-based access control
• tsconfig.json - Updated path resolution to support new src/ directory structure

User Interface

• src/app/auth/sign-in/page.tsx - Magic link authentication page
• src/app/dashboard/page.tsx - User investment dashboard
• src/app/admin/page.tsx - Admin withdrawal management interface

API Layer

• src/app/api/me/role/route.ts - User role endpoint for middleware
• src/app/api/invest/[planId]/route.ts - Investment processing endpoint
• src/app/api/withdraw/route.ts - Withdrawal request endpoint
• src/app/api/admin/withdrawals/[id]/route.ts - Admin approval endpoint

Build Fixes

• app/layout.tsx - Removed Google Fonts dependency to resolve build issues in sandboxed environment

Testing

The implementation has been validated with:

• ✅ Successful TypeScript compilation with strict mode
• ✅ Next.js build process completes without errors
• ✅ All API routes properly typed and structured
• ✅ Middleware correctly handles route protection logic

This implementation provides a solid foundation for a production-ready investment platform with proper authentication, authorization, and financial transaction management.

import { createBrowserClient } from '@supabase/supabase-js'
import { createServerClient, type CookieOptions } from '@supabase/ssr'
import { cookies } from 'next/headers'

export const supabaseBrowser = () =>
  createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )

export const supabaseServer = () => {
  const cookieStore = cookies()
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get: (name: string) => cookieStore.get(name)?.value,
        set: (name: string, value: string, options: CookieOptions) => {
          cookieStore.set({ name, value, ...options })
        },
        remove: (name: string, options: CookieOptions) => {
          cookieStore.set({ name, value: '', ...options })
        },
      },
    }
  )
}

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export const config = { matcher: ['/dashboard/:path*', '/admin/:path*'] }

export async function middleware(req: NextRequest) {
  const path = req.nextUrl.pathname
  const cookie = req.headers.get('cookie') || ''

  // Ask our API for the current user role (also indicates if logged in)
  const roleRes = await fetch(new URL('/api/me/role', req.url), {
    headers: { cookie }
  })
  const { role } = await roleRes.json()

  // If not logged in, our API returns role=null
  const loggedIn = role !== null

  if (!loggedIn) {
    const url = new URL('/auth/sign-in', req.url)
    url.searchParams.set('next', path)
    return NextResponse.redirect(url)
  }

  if (path.startsWith('/admin') && role !== 'admin') {
    return NextResponse.redirect(new URL('/dashboard', req.url))
  }

  return NextResponse.next()
}

import { NextResponse } from 'next/server'
import { supabaseServer } from '@/lib/supabase'

export async function GET() {
  const supabase = supabaseServer()
  const { data: { user } } = await supabase.auth.getUser()
  if (!user) return NextResponse.json({ role: null })

  const { data, error } = await supabase
    .from('profiles')
    .select('role')
    .eq('id', user.id)
    .single()

  if (error) return NextResponse.json({ role: null })
  return NextResponse.json({ role: data.role })
}

'use client'
import { useState } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { supabaseBrowser } from '@/lib/supabase'

export default function SignIn() {
  const [email, setEmail] = useState('')
  const router = useRouter()
  const next = useSearchParams().get('next') || '/dashboard'

  async function submit(e: React.FormEvent) {
    e.preventDefault()
    const { error } = await supabaseBrowser().auth.signInWithOtp({ email })
    if (error) {
      alert(error.message)
      return
    }
    alert('Magic link sent. Check your email.')
    router.push(next)
  }

  return (
    <main className="mx-auto mt-24 max-w-sm space-y-4">
      <h1 className="text-2xl font-bold">Sign in</h1>
      <form onSubmit={submit} className="space-y-3">
        <input
          className="w-full rounded border p-2"
          type="email"
          placeholder="you@example.com"
          value={email}
          onChange={(e)=>setEmail(e.target.value)}
          required
        />
        <button className="w-full rounded bg-black p-2 text-white">Send magic link</button>
      </form>
    </main>
  )
}

import { supabaseServer } from '@/lib/supabase'

export default async function Dashboard() {
  const supabase = supabaseServer()
  const { data: { user } } = await supabase.auth.getUser()
  const uid = user?.id

  const [{ data: plans }, { data: tx }] = await Promise.all([
    supabase.from('investment_plans').select('*').eq('is_active', true),
    supabase.from('transactions')
      .select('type, amount, status, created_at')
      .eq('user_id', uid)
      .order('created_at', { ascending: false })
      .limit(10)
  ])

  const approved = (t?: any[]) => (t||[]).filter(x=>x.status==='approved')
  const dep = approved(tx).filter(x=>x.type==='deposit').reduce((a,b)=>a+Num...

</details>


<!-- START COPILOT CODING AGENT TIPS -->
---

✨ Let Copilot coding agent [set things up for you](https://github.com/gemcodee/nextjs-with-supabase/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot) — coding agent works faster and does higher quality work when set up for your repo.